<!--
 * @Author: your name
 * @Date: 2021-02-01 14:59:51
 * @LastEditTime: 2021-02-01 20:56:31
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \鲜花项目\html\首页.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <link rel="icon" href="../favicon.ico" type="image/x-icon"> -->
    <link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon">
    <title>鲜花APP</title>
    <link rel="stylesheet" href="../css/icon.css">
    <link rel="stylesheet" href="../css/normalize.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/swiper-bundle.css">
    <script src="../js/rem.js"></script>
    <script src="../js/jq.v1.7.js"></script>
    <script src="../js/index.js"></script>
    <script src="../js/swiper-bundle.js"></script>
</head>

<body>

    <!-- 头部搜索框 开始 -->
    <header class="top-search">
        <a href="#" class="top-search-btn">
            <i class="iconfont icon-sousuo"></i>
            <span class="search-placeholder">请输入内容</span>
        </a>
    </header>
    <!-- 头部搜索框 结束 -->

    <!-- banner 开始 -->
    <div class="banner swiper-container">
        <div class="swiper-wrapper">
            <img class="swiper-slide" src="../img/banner01.jpg" alt="">
            <img class="swiper-slide" src="../img/banner02.jpg" alt="">
            <img class="swiper-slide" src="../img/banner03.jpg" alt="">
            <img class="swiper-slide" src="../img/banner04.jpg" alt="">
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    <!-- banner 结束 -->

    <!-- 分类导航 开始 -->
    <nav class="goods-nav">
        <div class="nav-item">
            <a href="#">
                <img src="../img/home_flowers.png" alt="">
                <p>鲜花</p>
            </a>
        </div>
        <div class="nav-item">
            <a href="#">
                <img src="../img/home_forever.png" alt="">
                <p>永生花</p>
            </a>
        </div>
        <div class="nav-item">
            <a href="#">
                <img src="../img/home_cakes.png" alt="">
                <p>蛋糕</p>
            </a>
        </div>
        <div class="nav-item">
            <a href="#">
                <img src="../img/home_gifts.png" alt="">
                <p>礼品</p>
            </a>
        </div>
        <div class="nav-item">
            <a href="#">
                <img src="../img/home_chocolate.png" alt="">
                <p>巧克力</p>
            </a>
        </div>
    </nav>
    <!-- 分类导航 结束 -->

    <!-- 标签 开始 -->
    <div class="good-tips">
        <a class="good-tips-item">生日祝贺</a>
        <a class="good-tips-item">表白/求婚</a>
        <a class="good-tips-item">开业/商务</a>
        <a class="good-tips-item">周年纪念</a>
        <a class="good-tips-item">特价专区</a>
        <a class="good-tips-item">人气新品</a>
    </div>
    <!-- 标签 结束 -->

    <!-- 选项卡 开始 -->
    <div class="tab">
        <div class="tab-item tab-item-active">爱情鲜花</div>
        <div class="tab-item">送长辈鲜花</div>
        <div class="tab-item">永生花</div>
        <div class="tab-item">礼品</div>
        <div class="tab-item">蛋糕</div>
    </div>
    <!-- 选项卡 结束 -->

    <!-- 商品列表 开始 -->
    <div class="good-list">
        <div class="goods-head">送恋人/爱情鲜花</div>
        <div class="good-list-warp">
            <div class="good-item">
                <div class="goods-item-img">
                    <img src="../img/goods-item-img.jpg" alt="">
                </div>
                <div class="goods-item-info">
                    <p class="goods-item-info-title">你是唯一</p>
                    <p class="goods-item-info-desc">卡罗拉红玫瑰11枝</p>
                    <div class="goods-item-info-tag">
                        <span>年销售冠军</span>
                    </div>
                    <div class="goods-item-info-promo">经典爆款，年销售冠军！</div>
                    <div class="goods-item-bottom">
                        <div class="goods-item-left">￥<span class="goods-price">199</span></div>
                        <div class="goods-item-right">
                            <img src="../img/home_buy_btn.png">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 默认加载8个，点击加载更多跳转到分类详情页 -->
            <a href="#" class="goods-load-more">加载更多</a>
        </div>
    </div>
    <!-- 商品列表 结束 -->

    <footer>
        <p>&copy; 2021 版权所有，违者必究</p>
        <p>XXXX信息技术有限公司&nbsp;&nbsp;粤ICP备xxxxxxxx号</p>
    </footer>

    <!-- 公共样式 底部tabBar 开始 -->
    <div class="tabbar">
        <div class="tabbar-item active">
            <i class="iconfont icon-danseshixintubiao-"></i>
            <p>首页</p>
        </div>
        <div class="tabbar-item">
            <i class="iconfont icon-sousuofenleigengduo"></i>
            <p>分类</p>
        </div>
        <div class="tabbar-item">
            <i class="iconfont icon-B"></i>
            <p>购物车</p>
        </div>
        <div class="tabbar-item">
            <i class="iconfont icon-wode"></i>
            <p>我的</p>
        </div>
    </div>
    <!-- 公共样式 底部tabBar 结束 -->
</body>

</html>